<template>
<div class="register_container">
    <vue-particles
      style="height:100%;width:100%"
      class="register-bg"
      color="#39AFFD"
      :particleOpacity="0.8"
      :particlesNumber="150"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
></vue-particles>
    <div class="register_box">
        <h2>注册</h2>
    <!-- 登陆表单区域 -->
    <el-form ref="registerFormRef" :model="registerForm" :rules="registerformRules"   label-width="0px" class="register_form" >
        <!-- 用戶名 -->
      <el-form-item prop="user_name" label="Username" class="clickPostion">
         <el-input  prefix-icon="el-icon-user"  v-model="registerForm.user_name" placeholder="请输入用户名" @blur="checkUsers">
         </el-input>
      </el-form-item>
      <!-- 密碼 -->
        <el-form-item prop="user_password" label="Password" class="clickPostion">
         <el-input  prefix-icon="el-icon-lock"  v-model="registerForm.user_password" show-password placeholder="请输入密码"></el-input>
      </el-form-item>
       <el-form-item prop="password2" label="CheckPassword" class="clickPostion">
         <el-input  prefix-icon="el-icon-lock"  v-model="registerForm.password2" show-password placeholder="请再次输入密码"></el-input>
      </el-form-item>
    <el-form-item  label-width="40px" label="Sex" class="clickPostion">
      <el-radio-group v-model="registerForm.is_male" size="medium">
      <el-radio label=0>男</el-radio>
      <el-radio label=1>女</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="Birthday" label-width="80px" class="clickPostion">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model=" registerForm.birthday" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
      <!-- 按鈕 -->
        <el-form-item  class="btns">
         <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    </div>
</div>
</template>
<script>
const axios = require('axios');
export default {
    data() {
      let validPassword=(rule,value,callback)=>{
      let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
      if(!reg.test(value)){callback(new Error('密码必须是由4-20位字母+数字组合'))
      }
      else {
          callback()
      }
         }
   var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerForm.user_password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
   }
        var validateUsername = (rule, value, callback) => {
      setTimeout(() => {
        // console.log("validateName2goon")
        if (value === '') {
            callback(new Error('请输入用户名'));
        // } else if (this.flag=== false) {
        //     console.log("validateName2:" + this.isExist)
        //     callback(new Error('用户名已被使用'));
        } else {
            callback();
        }
    }, 400);
   }
        return {
            registerForm:{
                user_name:'',
                user_password: '',
                // password2:'',
                is_male: '',
                birthday: '',
            //    isExist:false
          },
        registerformRules:{
        // 验证用户名是否合法
        user_name: [
         { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
          { validator: validateUsername, trigger: 'blur' }
        ],
        // 验证密码是否合法
       user_password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { validator: validPassword, trigger: 'blur' }
            ],
         password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
             { validator: validPassword, trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
        ]
    }
        }
    },
    methods:{
        register() {
            var obj = this.registerForm;
            if (obj.id === ''||obj.user_password===''||obj.is_male===''||obj.birthday==='') {
                this.$message.error('请完善上面信息！');
            }
            else {
                axios({
                method: 'post',
                url: '/register',
                data:obj
            }).then(resp => {
                console.log(resp)
                if (resp.data === 0) {
                   this.$message({
                        message: '注册成功!请登录！',
                     type: 'success',
                       
                   })
              this.$router.replace('/Login') 
                }
                else if (resp.data === 2) {
                     this.$message.error('注册失败！');
                }
            }) 
            }
            console.log(obj); 
        },
    //     checkUsers() {
    //         var name= this.registerForm.userName
    //         axios({
    //             method: 'get',
    //             url: '',
    //             data: name
    //         }).then(resp => {
    //             // console.log(resp.data)
    //             if (!resp.data)//用户名可用
    //              this.isExist = true;
    //      })
    //     console.log(name)
    //     //   this.flag = false;
    //    }
    }
   
}
</script>
<style scoped>
*{
    margin:0;
    padding:0;
}
.register_container{
    height: 100vh;
    width: 100%;
    background-image: url("../../assets/background.jpg");
    background-repeat: no-repeat;
    background-size:cover;
}
.register_box{
    width: 450px;
    height: 550px;
    background-color: rgba(22, 22, 23, 0.2);
    /* background-color:rgb(242, 242, 252) ; */
    /* background-color: transparent; */
    border-radius:10px;
    position: absolute;
    box-shadow: 0 0 25px 10px rgba(200, 205, 233, 0.3) ;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.register_form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    /* // 元素指定宽度和高度包括了 padding 和 border  */
    box-sizing: border-box;
}
.btns{
    display: flex;
    justify-content: center;
}
h2{
    text-align: center;
    padding-top:10px;
    color:rgb(217, 231, 244);
}
.el-input .el-input__inner {
    background-color: rgba(233, 232, 239, 0.2);
    border:0;
    color:aliceblue;
}
.clickPostion .el-form-item__label {
color: aliceblue;
}
.register-bg{
width: 50%;
height: 50%;
} 
.select .el-radio_label{
    color:aliceblue;
}
/* .el-form .el-form-item__label {
    width: 30px;
} */
</style>
